<template>
    <div>
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button
            type="primary"
            @click="handleCreate"
          >
            新增
          </a-button>
          <a-button
            type="error"
            :disabled="getSelectRows().length === 0"
            @click="handleDelete"
            :loading="delLoading"
          > 
            批量删除
          </a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '修改名称',
                onClick: handleEditName.bind(null, record),
              },
              {
                label: '赠送优惠券',
                onClick: handleGive.bind(null, record.id),
              },
              {
                label: '修改计费策略',
                onClick: handleEditStandard.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
      <EditNameModal @register="registerNameModal" @success="handleSuccess" />
      <GiveModal @register="registerGiveModal" />
      <EditStandardModal @register="registerEditStandarModal"  @success="handleSuccess" />
    </div>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue';
import { defHttp } from '@/utils/http/axios';
  export default defineComponent({
    name: 'Groups',
  });
  </script>
  <script lang="ts" setup>
  import { onMounted, ref, h } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import EditNameModal from './EditNameModal.vue';
  import EditStandardModal from './EditStandarModal.vue';
  import GiveModal from './GiveModal.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  const delLoading = ref(false);
  const { createMessage } = useMessage();
  const [registerEditStandarModal, { openModal: openStandarModal }] = useModal();
  const [registerNameModal, { openModal: openNameModal }] = useModal();
  const [registerGiveModal, { openModal: openGiveModal }] = useModal();

  const [registerTable, { reload, getSelectRows, getSelectRowKeys }] =
    useTable({
      api: '/admin/groups/list',
      columns: [
        {
            title: '分组名称',
            dataIndex: 'name',
            width: 90,
        }, 
        {
            title: '分组人数',
            dataIndex: 'groupsNum',
            width: 90,
        },
        {
            title: '计费策略',
            dataIndex: 'chargeStandardName',
            width: 90,
            customRender: ({ text }) => {
                return text ? text : '平台策略';
            },
        },
      ],
      useSearchForm: true,
      showIndexColumn: true,
      indexColumnProps: {
        fixed: 'left',
      },
      pagination: true,
      bordered: true,
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
      rowKey: 'id',
      rowSelection: {
        type: 'checkbox',
      },
    });
  onMounted(() => {
  });
  
  function handleCreate() {
    openNameModal(true, {
      isUpdate: false,
    })
  }
  function handleEditName(record: Recordable) {
    openNameModal(true, {
      record,
      isUpdate: true,
    });
  }
  function handleEditStandard(record: Recordable) {
    openStandarModal(true, {
      record,
    });
  }
  function handleGive(id: number) {
    openGiveModal(true, {
        id,
    });
  }
  async function handleDelete() {
    delLoading.value = true;
    try {
        const res = await defHttp.post({ url: `/admin/groups/delete`, params: getSelectRowKeys()});
        createMessage.success(res);
        reload();
    } finally {
        delLoading.value = false;
    }
  }
  function handleSuccess() {
    reload();
  }
  </script>
  